*{
  margin: 0;
  padding: 0;
}

html,body{
  height: 100%;
  position: relative;
}

.container{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.show-bg{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
}

.show-tip-1{
  width: 8vh;
  position: absolute;
  top:28vh;
  left: 18vh;
  animation: active1 2s linear infinite;
  -webkit-animation:active1 2s linear infinite;
  -moz-animation:active1 2s linear infinite;
  -ms-animation:active1 2s linear infinite;
  -o-animation:active1 2s linear infinite;
  z-index: 9;
}

@keyframes active1{
  0%{
		top:28vh;
	}
	50%{
    top:26vh;
	}
	100%{
    top:28vh;
	}
}

@-webkit-keyframes active1{
  0%{
		top:28vh;
	}
	50%{
    top:26vh;
	}
	100%{
    top:28vh;
	}
}

@-moz-keyframes active1{
  0%{
		top:28vh;
	}
	50%{
    top:26vh;
	}
	100%{
    top:28vh;
	}
}

@-o-keyframes active1{
  0%{
		top:28vh;
	}
	50%{
    top:26vh;
	}
	100%{
    top:28vh;
	}
}

.show-tip-2{
  width: 8vh;
  position: absolute;
  top:30vh;
  left: 58vh;
  animation: active2 2s linear infinite;
  -webkit-animation:active2 2s linear infinite;
  -moz-animation:active2 2s linear infinite;
  -ms-animation:active2 2s linear infinite;
  -o-animation:active2 2s linear infinite;
  z-index: 9;

}

@keyframes active2{
  0%{
		top:30vh;
	}
	50%{
    top:32vh;
	}
	100%{
    top:30vh;
	}
}

@-webkit-keyframes active2{
  0%{
		top:30vh;
	}
	50%{
    top:32vh;
	}
	100%{
    top:30vh;
	}
}

@-o-keyframes active2{
  0%{
		top:26vh;
	}
	50%{
    top:28vh;
	}
	100%{
    top:26vh;
	}
}

@-moz-keyframes active2{
  0%{
		top:30vh;
	}
	50%{
    top:32vh;
	}
	100%{
    top:30vh;
	}
}

.show-tip-3{
  width: 8vh;
  position: absolute;
  top:13vh;
  left: 98vh;
  animation: active3 2s linear infinite;
  -webkit-animation:active3 2s linear infinite;
  -moz-animation:active3 2s linear infinite;
  -ms-animation:active3 2s linear infinite;
  -o-animation:active3 2s linear infinite;
  z-index: 9;

}

@keyframes active3{
  0%{
		top:13vh;
	}
	50%{
    top:15vh;
	}
	100%{
    top:13vh;
	}
}

@-webkit-keyframes active3{
  0%{
		top:13vh;
	}
	50%{
    top:15vh;
	}
	100%{
    top:13vh;
	}
}

@-moz-keyframes active3{
  0%{
		top:13vh;
	}
	50%{
    top:15vh;
	}
	100%{
    top:13vh;
	}
}

@-o-keyframes active3{
  0%{
		top:26vh;
	}
	50%{
    top:28vh;
	}
	100%{
    top:26vh;
	}
}

.show-tip-4{
  width: 8vh;
  position: absolute;
  top:27vh;
  left: 131vh;
  animation: active4 2s linear infinite;
  -webkit-animation:active4 2s linear infinite;
  -moz-animation:active4 2s linear infinite;
  -ms-animation:active4 2s linear infinite;
  -o-animation:active4 2s linear infinite;
  z-index: 9;
}

@keyframes active4{
  0%{
		top:27vh;
	}
	50%{
    top:25vh;
	}
	100%{
    top:27vh;
	}
}

@-webkit-keyframes active4{
  0%{
		top:27vh;
	}
	50%{
    top:25vh;
	}
	100%{
    top:27vh;
	}
}

@-moz-keyframes active4{
  0%{
		top:27vh;
	}
	50%{
    top:25vh;
	}
	100%{
    top:27vh;
	}
}

@-o-keyframes active4{
  0%{
		top:27vh;
	}
	50%{
    top:25vh;
	}
	100%{
    top:27vh;
	}
}

.show-tip-5{
  width: 8vh;
  position: absolute;
  top:22vh;
  left: 164vh;
  animation: active5 2s linear infinite;
  -webkit-animation:active5 2s linear infinite;
  -moz-animation:active5 2s linear infinite;
  -ms-animation:active5 2s linear infinite;
  -o-animation:active5 2s linear infinite;
  z-index: 9;
}

@keyframes active5{
  0%{
		top:22vh;
	}
	50%{
    top:24vh;
	}
	100%{
    top:22vh;
	}
}

@-webkit-keyframes active5{
  0%{
		top:22vh;
	}
	50%{
    top:24vh;
	}
	100%{
    top:22vh;
	}
}

@-moz-keyframes active5{
  0%{
		top:22vh;
	}
	50%{
    top:24vh;
	}
	100%{
    top:22vh;
	}
}

@-o-keyframes active5{
  0%{
		top:26vh;
	}
	50%{
    top:28vh;
	}
	100%{
    top:26vh;
	}
}

.show-tip-6{
  width: 8vh;
  position: absolute;
  top:40vh;
  left: 188vh;
  animation: active6 2s linear infinite;
  -webkit-animation:active6 2s linear infinite;
  -moz-animation:active6 2s linear infinite;
  -ms-animation:active6 2s linear infinite;
  -o-animation:active6 2s linear infinite;
  z-index: 9;

}

@keyframes active6{
  0%{
		top:40vh;
	}
	50%{
    top:38vh;
	}
	100%{
    top:40vh;
	}
}

@-webkit-keyframes active6{
  0%{
		top:40vh;
	}
	50%{
    top:38vh;
	}
	100%{
    top:40vh;
	}
}

@-moz-keyframes active6{
  0%{
		top:40vh;
	}
	50%{
    top:38vh;
	}
	100%{
    top:40vh;
	}
}

@-o-keyframes active6{
  0%{
		top:40vh;
	}
	50%{
    top:38vh;
	}
	100%{
    top:40vh;
	}
}

.show-tip-7{
  width: 8vh;
  position: absolute;
  top:45vh;
  left: 106.5vh;
  animation: active7 2s linear infinite;
  -webkit-animation:active7 2s linear infinite;
  -moz-animation:active7 2s linear infinite;
  -ms-animation:active7 2s linear infinite;
  -o-animation:active7 2s linear infinite;
  z-index: 9;

}

@keyframes active7{
  0%{
		top:45vh;
	}
	50%{
    top:43vh;
	}
	100%{
    top:45vh;
	}
}

@-webkit-keyframes active7{
  0%{
		top:45vh;
	}
	50%{
    top:43vh;
	}
	100%{
    top:45vh;
	}
}

@-moz-keyframes active7{
  0%{
		top:45vh;
	}
	50%{
    top:43vh;
	}
	100%{
    top:45vh;
	}
}

@-o-keyframes active7{
  0%{
		top:45vh;
	}
	50%{
    top:43vh;
	}
	100%{
    top:45vh;
	}
}

.show-tip-8{
  width: 8vh;
  position: absolute;
  top:71vh;
  left: 106vh;
  animation: active8 2s linear infinite;
  -webkit-animation:active8 2s linear infinite;
  -moz-animation:active8 2s linear infinite;
  -ms-animation:active8 2s linear infinite;
  -o-animation:active8 2s linear infinite;
  z-index: 9;

}

@keyframes active8{
  0%{
		top:71vh;
	}
	50%{
    top:73vh;
	}
	100%{
    top:71vh;
	}
}

@-webkit-keyframes active8{
  0%{
		top:71vh;
	}
	50%{
    top:73vh;
	}
	100%{
    top:71vh;
	}
}

@-moz-keyframes active8{
  0%{
		top:71vh;
	}
	50%{
    top:73vh;
	}
	100%{
    top:71vh;
	}
}

@-o-keyframes active8{
  0%{
		top:26vh;
	}
	50%{
    top:28vh;
	}
	100%{
    top:26vh;
	}
}

.show-tip-9{
  width: 8vh;
  position: absolute;
  top:69vh;
  left: 63vh;
  animation: active9 2s linear infinite;
  -webkit-animation:active9 2s linear infinite;
  -moz-animation:active9 2s linear infinite;
  -ms-animation:active9 2s linear infinite;
  -o-animation:active9 2s linear infinite;
  z-index: 9;

}

@keyframes active9{
  0%{
		top:69vh;
	}
	50%{
    top:67vh;
	}
	100%{
    top:69vh;
	}
}

@-webkit-keyframes active9{
  0%{
		top:69vh;
	}
	50%{
    top:67vh;
	}
	100%{
    top:69vh;
	}
}

@-moz-keyframes active9{
  0%{
		top:69vh;
	}
	50%{
    top:67vh;
	}
	100%{
    top:69vh;
	}
}

@-o-keyframes active9{
  0%{
		top:69vh;
	}
	50%{
    top:67vh;
	}
	100%{
    top:69vh;
	}
}

.show-intro{
  position: fixed;
  width: 100%;
  top:0;
  left: 0;
  opacity: 1;
  z-index: 10;
}

.tip-1{
  position: absolute;
  width: 18vh;
  top: 36vh;
  left: 11vh;
}
.tip-2{
  position: absolute;
  width: 24vh;
  top: 40vh;
  left: 50vh;
}
.tip-3{
  position: absolute;
  width: 18vh;
  top: 23vh;
  left: 93vh;
}
.tip-4{
  position: absolute;
  width: 18vh;
  top: 34vh;
  left: 126vh;
}
.tip-5{
  position: absolute;
  width: 24vh;
  top: 32vh;
  left: 156vh;
}
.tip-6{
  position: absolute;
  width: 18vh;
  top: 48vh;
  left: 183vh;
}
.tip-7{
  position: absolute;
  width: 24vh;
  top: 53vh;
  left: 97vh;
}
.tip-8{
  position: absolute;
  width: 24vh;
  top: 80vh;
  left: 98vh;
}
.tip-9{
  position: absolute;
  width: 16vh;
  top: 77vh;
  left: 58vh;
}
.show-tip{
  position:absolute;
  width: 15vh;
  top:76vh;
  left: 20vh;
}
